<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<h1>Register</h1>
</h:head>

<body>

	<f:view>
		<h:form id="register" >
			<h3>请输入您的名称,密码和邮箱</h3>
			<h:outputText id="msg" value="#{ajaxBean.errMessage}"
				style="color:red" />
			<p>
				名称:<br />
				<h:inputText id="name" value="#{userBean.name}">
					<f:ajax event="blur" render="msg" onevent="checkName"
						listener="#{ajaxBean.checkName}">
					</f:ajax>
				</h:inputText>
				<h:outputText id="outNameMsg" style="color:red" />
			</p>
			<p>
				首次密码:<br />
				<h:inputSecret id="first" value="#{userBean.password}" />
			</p>
			<p>
				确认密码：<br />
				<h:inputSecret id="confirm" value="#{userBean.password}">
					<f:ajax event="blur" onevent="checkPassword"></f:ajax>
				</h:inputSecret>
				<h:outputText id="outPasswordMsg" style="color:red" />
			</p>
				邮箱:<br />
			<h:inputText id="email" value="#{userBean.email}" type="text">
				<f:ajax event="blur" render="msg" onevent="checkEmail"
					listener="#{ajaxBean.checkMail}"></f:ajax>
			</h:inputText>
			<h:outputText id="outemail" style="color:red" />
			<br />
			输入验证码：
			<br />
			<h:inputText id="img" name="code" value="#{ajaxBean.code}" size="5" type="type" >
			<f:ajax event="blur" render="msg" 
                    listener="#{ajaxBean.checkCode}"></f:ajax>
			</h:inputText>
			<img id = "img" src="img.jsp" />
			<h:commandButton value="换一张" >
			<f:ajax event="click" onevent="changeImg"></f:ajax>
			</h:commandButton>

			<br />
			<h:commandButton value="提交" action="#{ajaxBean.register()}" />
		</h:form>


	</f:view>
	

	<script type="text/javascript">

	function changeImg()
	{
		document.getElementById("img").src='img.jsp?t='+new Date().getTime();
	}
	 function checkName()
	{
		var name = document.getElementById("register:name").value;
		var outNameMsg = document.getElementById("register:outNameMsg");
		var re = new RegExp("[A-Za-z0-9_]+");
		 if(!name.match(re)) 
			{
			outNameMsg.innerHTML="名称应是字母数字和下划线，且第一个字符必须是字母！";
			return false;
			} 
		outNameMsg.innerHTML = "√";
		return true;
		
	} 
	
	   function checkPassword()
	   {
		    var firstPassword = document.getElementById("register:first").value;
		    var confirmPassword = document.getElementById("register:confirm").value;
		    var outPasswordMsg = document.getElementById("register:outPasswordMsg");
		    if(firstPassword != confirmPassword )
			    {
		           outPasswordMsg.innerHTML="密码不一致";
		           return false;
			    }
			    outPasswordMsg.innerHTML="√";
			    return true;
		   
		}
       function checkEmail()
        {

    	   var outemail = document.getElementById("register:outemail");
           var email = document.getElementById("register:email").value;
            if(email != "")
           {

        	   if(email.indexOf("@") != -1)
            	   {
            	    if(email.indexOf(".") != -1)
                    	   {
        		           if( email.indexOf(".") > email.indexOf("@"))
                		        {
        		        	   outemail.innerHTML="√";
        		            	   return true;
            		            } 
                    	   }      
            	   }

           }
            outemail.innerHTML="E-mail格式不正确！";
            return false;
  }
</script>
</body>
</html>
